import { IconFont } from "@nutui/icons-vue";
import { defineComponent, onMounted, reactive } from "vue";
import styles from "./login.module.scss";
import useSms from "@/hooks/useSms";
import { $getCaptcha, $saleAchievementLogin } from "@/api/api";
import { showToast } from "@nutui/nutui";
import { useStore as useUserStore } from "@/store/user";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "login",
  setup() {
    const sms = useSms();
    const userStore = useUserStore();
    const router = useRouter();
    const state = reactive({
      mobile: "",
      img_code: "",
      captcha: {
        index_code: "",
        img: "",
      },
      mobile_code: "",
    } as any)
    // 获取图文验证码
    const getCaptcha = () => {
      $getCaptcha({}).then((res: any) => {
        state.captcha.img = res.data.img || '';
        state.captcha.index_code = res.data.index_code || '';
      })
    }
    // 登录
    const submit = () => {
      if (!state.mobile) {
        showToast.text("请输入手机号!")
        return;
      }
      if (!state.mobile_code) {
        showToast.text("请输入手机动态码!")
        return;
      }
      $saleAchievementLogin({
        key: sms.state.key,
        code: state.mobile_code,
        mobile: state.mobile,
      }).then(res => {
        userStore.login({
          token: res.data.token,
          uid: res.data.uid,
          userinfo: res.data.userinfo,
        })
        router.replace('/');
      })
    }
    onMounted(() => {
      getCaptcha();
    })
    const Components = () => (
      <div class={[styles["login"]]}>
        <img class={styles["login-bc"]} src={require("@/assets/login-image.jpg")} />
        <div class={[styles["bg_box"]]}></div>
        <div class={[styles["body_box"]]}>
          <div class={[styles["title_box"]]}>
            宜春惠民保业务员
          </div>
          <div class={[styles["content_box"]]}>
            <nut-input v-model={state.mobile} placeholder="输入手机号" clearable v-slots={
              {
                left: () => {
                  return <IconFont name="my2"></IconFont>
                }
              }
            }></nut-input>
            <nut-input v-model={state.img_code} placeholder="输入图文验证码" clearable v-slots={
              {
                left: () => {
                  return <IconFont name="edit"></IconFont>
                },
                right: () => <img src={state.captcha.img} class={styles.captcha} onClick={() => { getCaptcha() }} />
              }
            }
            ></nut-input>
            <nut-input v-model={state.mobile_code} maxLength={6} placeholder="输入手机动态码" clearable v-slots={
              {
                left: () => {
                  return <IconFont name="comment"></IconFont>
                },
                right: () => {
                  return <nut-button size="small" color="#5e61fe" type="default" disabled={state.codeBool} onClick={() => {
                    sms.sendSms(state.mobile, state.img_code, state.captcha.index_code, () => { getCaptcha() })
                  }}>
                    {sms.show_text.value}
                  </nut-button>
                }
              }
            }
            ></nut-input>
            <div class={[styles["button_box"]]}>
              <nut-button style={{ width: "240px" }} color="#5e61fe" type="default" onClick={() => { submit() }}>登录</nut-button>
            </div>
          </div>
        </div>
      </div>
    );
    return {
      Components,
    };
  },
  render() {
    return <this.Components></this.Components>;
  },
});